import QtQuick
import QtQuick.Controls

// 可拖拽列表视图组件
ListView {
    id: listView

    // 基础属性设置
    width: parent.width
    height: parent.height
    spacing: 5
    clip: true
    interactive: true

    // 列表数据模型
    model: ListModel {
        id: listModel
        ListElement { name: "项目 1"; colorCode: "#FFB6C1" }
        ListElement { name: "项目 2"; colorCode: "#98FB98" }
        ListElement { name: "项目 3"; colorCode: "#87CEEB" }
        ListElement { name: "项目 4"; colorCode: "#DDA0DD" }
    }

    // 列表项委托
    delegate: Item {
        id: delegateItem
        width: listView.width
        height: 60

        required property int index
        required property string name
        required property string colorCode

        // 可拖拽矩形
        Rectangle {
            id: dragRect
            anchors.margins: 5
            color: colorCode
            radius: 5
            border {
                color: "gray"
                width: 1
            }

            // 拖拽相关属性
            Drag.active: dragArea.drag.active
            Drag.source: delegateItem
            Drag.hotSpot {
                x: width / 2
                y: height / 2
            }

            // 拖拽状态管理
            states: [
                State {
                    name: "dragging"
                    when: dragArea.drag.active
                    ParentChange {
                        target: dragRect
                        parent: listView
                    }
                    PropertyChanges {
                        target: dragRect
                        anchors {
                            left: undefined
                            right: undefined
                            top: undefined
                            bottom: undefined
                        }
                        width: delegateItem.width - 10
                        height: delegateItem.height - 10
                        z: 2
                    }
                },
                State {
                    name: "normal"
                    when: !dragArea.drag.active
                    ParentChange {
                        target: dragRect
                        parent: delegateItem
                    }
                    PropertyChanges {
                        target: dragRect
                        anchors {
                            left: parent.left
                            right: parent.right
                            top: parent.top
                            bottom: parent.bottom
                            margins: 5
                        }
                        x: 0
                        y: 0
                    }
                }
            ]

            // 显示文本
            Text {
                anchors.centerIn: parent
                text: name
                font.pixelSize: 16
            }

            // 拖拽区域
            MouseArea {
                id: dragArea
                anchors.fill: parent
                drag.target: dragRect
                drag.axis: Drag.YAxis
                cursorShape: Qt.PointingHandCursor

                property int startIndex: -1
                property bool held: false

                onPressed: {
                    held = true
                    startIndex = delegateItem.index
                }

                onReleased: {
                    held = false
                    var dropPos = mapToItem(listView, mouseX, mouseY)
                    var dropIndex = listView.indexAt(dropPos.x, dropPos.y)
                    
                    if (dropIndex >= 0 && dropIndex < listModel.count && dropIndex !== startIndex) {
                        listModel.move(startIndex, dropIndex, 1)
                    }
                }
            }
        }
    }

    // 位移动画
    displaced: Transition {
        NumberAnimation {
            properties: "x,y"
            duration: 200
            easing.type: Easing.OutQuad
        }
    }
}